<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rand100</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    #canvas {
        display: block;
        margin: 0 auto;
        border: 1px solid blue;
    }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>
<script type="text/javascript">
    var oCanvas = document.querySelector("canvas");
    var context = canvas.getContext("2d");
    oCanvas.width = 1600;
    oCanvas.height = 768;
	
	context.beginPath();
    context.strokeStyle = "blue";
    // 上边框
    context.moveTo(100,100);
    context.lineTo(200,100);
    context.arcTo(230,100,230,130,30);
    // 右
    context.lineTo(230,230);
    context.arcTo(230,260,200,260,30);
    // 下
    context.lineTo(100,260);
    context.arcTo(70,260,70,230,30);
    // 左
    context.lineTo(70,130);
    context.arcTo(70,100,100,100,30);

    context.stroke();
    context.closePath();

</script>